import React from 'react';
import ImageLazy from '../commons/ImageLazy';
import NavLink from '../commons/NavLink';
import { connect } from 'react-redux';
import {them_doc_data} from '../../actions';
import {getHosImg,getDocImg,getServImg} from '../../actions/ActionTypes';

const mall_vip = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../../static/img/mall_vip.png');

var M_t_doc = React.createClass({
  componentDidMount:function(){
    const {dispatch} = this.props;
    dispatch(them_doc_data(20,1))
  },
  render:function(){
      let doc_arr = this.props.doc_arr;
    return(
      <div id="mall_view">
      <div className="mall_them_doc">
        <div className="item_wrapper">
        {
          doc_arr.map(function(item,index){
            var imgSrc = getDocImg(item.doctorPic,'_200_200',item.hospitalId,item.doctorId);
            return(
              <NavLink to={"/doc/det/" + item.doctorId} className="common_item border_b1">
                <div className="left">
                  <em style={{'backgroundImage':'url('+ imgSrc + ')'}}></em>
                  {/* <img src={imgSrc} style={{height:'2rem'}} /> */}
                </div>
                <div className="right">
                  <h4>{item.doctorName} | {item.doctorViceTitle}</h4>
                  <p>
                    {item.hospitalName}  <ImageLazy src={mall_vip} style={{"width":".28rem"}} />
                  </p>
                </div>
              </NavLink>
            )
          })
        }


        </div>
      </div></div>
    )
  }
})

let mapStateToProps = (state)=>{
  let doc_arr = state.mall.mall_them_doc || [];
  return{
    doc_arr:doc_arr
  }
}

export default connect(mapStateToProps)(M_t_doc);
